<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">

<head th:include="include :: header('添加文章')"></head>
<th:block th:include="include::bootstrap-select-css" />
<th:block th:include="include :: oly_froala_css" />
<th:block th:include="include :: oly_tagsinput_css" />
<th:block th:include="include :: bootstrap-fileinput-css" />

<style>
	.keyinput>.bootstrap-tagsinput {
		width: 100%;
	}

	.keyinput input {
		width: 150px;
	}

	.tagView input {
		display: none;
	}

	.tagView .bootstrap-tagsinput {
		padding: 0;
	}

	.opshow {
		opacity: 1;
	}

	.ophide {
		opacity: 0.5;
	}

	#chooseImgBox>img {
		width: 100px;
		height: 100px;
	}
</style>

<body class="white-bg">
	<h1 style="display: inline-block;padding-left: 10px;">添加文章</h1>
	<form class="form-horizontal m" id="form-article-add">
		<div class="row" style="padding: 10px">
			<div class="col-md-9">
				<!--   标题 -->
				<div class="form-group">
					<div class="col-sm-12">
						<input class="form-control" type="text" name="articleTitle" id="articleTitle"
							placeholder="文章标题" />
					</div>
				</div>
				<!-- 固定链接|保存 -->
				<div class="form-group">
					<div class="row" style="padding-left: 15px; padding-right: 15px">
						<div class="col-sm-12">
							<div class="row">
								<div class="col-sm-6">
									<input class="form-control" type="text" name="articleUrl" id="articleUrl"
										placeholder="固定链接" />
									<span class="help-block m-b-none"><i class="fa fa-info-circle"></i>固定路径为：<span
											th:text="${@config.getKey('oly.cms.articleUrl.fixedPrefix')}"></span><span
											id="relativeUrl"></span></span>
								</div>
								<div class="col-sm-6">
									<div class="btn-group" role="group"
										style="margin-top: 10px; float: right; margin-right: 40px;">
										<span class="btn btn-default" id="add-btn">保存</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 关键词 -->
				<div class="form-group">
					<div class="col-sm-12 keyinput">
						<input class="form-control" type="text" name="keywords" id="articleKey" placeholder="关键词" />
					</div>
				</div>
				<!-- 内容 -->
				<div class="form-group">
					<div class="col-sm-12">
						<div class="ibox-content" style="padding: 0;">
							<div class="panel-body" style="padding: 0;">
								<div class="panel-group" id="accordion">
									<div class="panel panel-default" style="width: 100%;padding: 0;">
										<div class="panel-heading">
											<h5 class="panel-title">
												<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
													aria-expanded="false" class="collapsed">预览目录</a>
											</h5>
										</div>
										<div id="collapseOne" class="panel-collapse collapse" aria-expanded="false"
											style="height: 0px;">
											<div class="panel-body" id="custom-toc-container">

											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="editor">
						</div>
					</div>
				</div>
			</div>

			<div class="col-md-3">
				<!-- 分类 -->
				<div class="form-group">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>选择分类</h5>
							<div class="ibox-tools">
								<a class="close-link"><i class="fa fa-question-circle" title="选择分类"></i></a><a
									class="add-link" onclick="addCat()"><i class="fa fa-plus-circle"
										title="添加分类"></i></a> <a class="collapse-link"><i class="fa fa-chevron-up"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content" style="display: block;">
							<ul class="list-unstyled">
								<li class="tagView">
									<input class="form-control" type="text" name="cats" id="catInput" />
								</li>
								<li>
									<div class="input-group" style="padding-top: 10px">
										<input class="form-control" type="text" onclick="selectCatTree()" id="treeName"
											readonly th:value="${catName}">
										<span class="input-group-addon"><i class="fa fa-search"></i></span>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- 标签 -->
				<div class="form-group">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>选择标签</h5>
							<div class="ibox-tools">
								<a class="close-link"><i class="fa fa-question-circle" title="选择标签"></i></a> <a
									class="add-link" onclick="addTag()"><i class="fa fa-plus-circle"
										title="添加标签"></i></a> <a class="collapse-link"><i class="fa fa-chevron-up"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content" style="display: block;">
							<ul class="list-unstyled">
								<li class="tagView"><input class="form-control" type="text" name="tags" id="tagInput" />
								</li>
								<li style="padding-top: 10px"><select class="selectpicker show-tick form-control"
										data-live-search="true" id="chooseTag" name="chooseTag" title="选择标签">
									</select></li>
							</ul>
						</div>
					</div>
				</div>
				<!-- 类型 -->
				<div class="form-group">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>文章类型</h5>
							<div class="ibox-tools">
								<a class="collapse-link"><i class="fa fa-chevron-up"></i> </a> <a class="close-link"><i
										class="fa fa-times"></i></a>
							</div>
						</div>
						<div class="ibox-content" style="display: block;">
							<div class="radio-box" th:each="dict : ${@dict.getType('cms_article_type')}">
								<input type="radio" th:id="${dict.dictCode}" name="articleType"
									th:value="${dict.dictValue}" th:checked="${dict.default}">
								<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
							</div>
						</div>
					</div>
				</div>

				<!-- seo描述 -->
				<div class="form-group">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>SEO描述</h5>
							<div class="ibox-tools">
								<a class="collapse-link"><i class="fa fa-chevron-up"></i> </a> <a class="close-link"><i
										class="fa fa-times"></i></a>
							</div>
						</div>
						<div class="ibox-content" style="display: block;">
							<textarea class="form-control" rows="3" name="description"></textarea>
						</div>
					</div>
				</div>
				<!-- 评论 -->
				<div class="form-group">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>评论开关</h5>
							<div class="ibox-tools">
								<a class="collapse-link"><i class="fa fa-chevron-up"></i> </a> <a class="close-link"><i
										class="fa fa-times"></i></a>
							</div>
						</div>
						<div class="ibox-content" style="display: block;">
							<label class="radio-inline"> <input type="radio" checked name="allowComment" value="1"> 开启
							</label> <label class="radio-inline"> <input type="radio" name="allowComment" value="0"> 关闭
							</label>
						</div>
					</div>
				</div>
				<!-- 是否为转载 -->
				<div class="form-group">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>转载链接</h5>
							<div class="ibox-tools">
								<a class="close-link"><i class="fa fa-question-circle" title="文章来源，不填则为原创"></i></a> <a
									class="collapse-link"><i class="fa fa-chevron-up"></i> </a>
							</div>
						</div>
						<div class="ibox-content" style="display: block;">
							<input class="form-control" type="text" name="reprintUrl"  />
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>

	<th:block th:include="include :: footer" />
	<th:block th:include="include::bootstrap-select-js" />
	<th:block th:include="include :: oly_froala_js" />
	<th:block th:include="include :: bootstrap-fileinput-js" />
	<th:block th:include="include :: oly_tagsinput_js" />
	<script type="text/html" id="okAdd">
			<div class="form-group" style="padding-top:20px">
			<label class="col-sm-2 control-label">文章预览</label>
			<div class="col-sm-10">
				<textarea class="form-control" rows="3" id="articleSummary" placeholder="文章预览"></textarea>
			</div>
		</div>

   <div class="form-group" style="padding-top:80px">
			<label class="col-sm-2 control-label">选择封面</label>
			<div class="col-sm-10" id="chooseImgBox">
			</div>
    </div>
    <div class="form-group text-center">
			<button type="button" class="btn btn-primary" id="saveArticle">保存文章</button>
	</div>
    </script>
	<script th:inline="JavaScript">
		var prefix = ctx + "cms/article",
			tagPrefix = ctx + "cms/tag",
			catPrefix = ctx + "cms/cat",
			maxTag = [[${@config.getKey('oly.cms.articleTag.maxNum') }]],
		maxCat = [[${@config.getKey('oly.cms.articleCat.maxNum') }]],
		maxPhoto = [[${@config.getKey('oly.cms.articleImg.maxNum') }]],
		maxKeyword = [[${@config.getKey('oly.cms.articleKeyword.maxNum') }]];
		//初始化标签
		$("#tagInput").tagsinput({
			maxTags: maxTag,
			itemValue: 'tagId',
			itemText: 'tagName'
		});

		//初始化文章分类
		$("#catInput").tagsinput({
			maxTags: maxCat,
			itemValue: 'catId',
			itemText: 'catName'
		});

		//文章关键词
		$("#articleKey").tagsinput({
			maxTags: maxKeyword
		});

		// 选择标签
		$("#chooseTag").change(function () {
			var k = $(this).val();
			var n = $(this).find("option:selected").text().split("(")[0];
			if (n != "") {
				$("#tagInput").tagsinput('add', {
					'tagId': k,
					'tagName': n
				});
			}
		});

		//获取标签列表
		function getTag() {
			$.get(tagPrefix + "/listTagNotHide", function (data, status) {
				$("#chooseTag").empty();
				$.each(data, function (i, e) { //i是索引，e是json对象
					$("#chooseTag").append("<option value=" + e.tagId + ">" + e.tagName + "(" + ((e.tagCount) === null ? 0 : e.tagCount) +
						")</option>");
				});
				$("#chooseTag").selectpicker("refresh");
			});
		}

		/*文章管理-新增-选择类目树*/
		function selectCatTree() {
			var treeId = $("#treeId").val();
			var catId = treeId > 0 ? treeId : 1;
			var url = catPrefix + "/selectCatTree/1/" + catId;
			var options = {
				title: '类目选择',
				width: "380",
				url: url,
				callBack: doSubmit
			};
			$.modal.openOptions(options);
		}
		//选择类目回调
		function doSubmit(index, layero) {
			var body = layer.getChildFrame('body', index);
			var catId = body.find('#treeId').val();
			var catName = body.find('#treeName').val();
			$("#treeName").val(catName);
			$("#catInput").tagsinput('add', {
				'catId': catId,
				'catName': catName
			});
			layer.close(index);
		};
		/* 添加分类 */
		function addCat() {
			$.modal.open('添加分类', catPrefix + "/add/0");
		}
		/* 添加标签 */
		function addTag() {
			$.modal.open('添加标签', tagPrefix + "/add");
		}
		//初始化标签
		$(window).on('load', function () {
			//初始化标签下拉框
			$('#chooseTag').selectpicker();
			getTag();
		});

		/* 初始化富文本编辑器 */
		var editor = new FroalaEditor("#editor", {
			// Set the language code.
			language: 'zh_cn',
			imageUploadURL: prefix + '/articleImgByFroala', //上传到本地服务器

		});
		/* 文章验证 */
		$("#form-article-add").validate({
			errorPlacement: function (error, element) {
				layer.tips(error.html(), element, {
					tipsMore: true
				});
			},
			rules: {
				articleType: {
					required: true
				},
				allowComment: {
					required: true
				},
				articleTitle: {
					required: true,
					remote: {
						url: prefix + "/checkArticleTitle",
						type: "post",
						dataType: "json",
						data: {
							"articleTitle": function () {
								if ($("#catInput").val().length != null) {
									return $.common.trim($("#articleTitle").val());
								} else {
									layer.msg('类别未选', {
										icon: 1,
										time: 1000 //2秒关闭（如果不配置，默认是3秒）
									}, function () {
										layer.closeAll();
									});
									return;
								}
							}
						},
						dataFilter: function (data, type) {
							return $.validate.unique(data);
						}
					}
				},
				articleUrl: {
					required: true,
					remote: {
						url: prefix + "/checkArticleUrl",
						type: "post",
						dataType: "json",
						data: {
							"articleUrl": function () {
								return $.common.trim($("#articleUrl").val());
							}
						},
						dataFilter: function (data, type) {
							if (data == "0") {
								$("#relativeUrl").text($("#articleUrl").val());
							}
							return $.validate.unique(data);
						}
					}
				}
			},
			messages: {
				"articleTitle": {
					remote: "文章标题已经存在"
				},
				"articleUrl": {
					remote: "文章路径已经存在"
				}
			},
			focusCleanup: true
		});

		/* 进入保存按钮 */
		$("#add-btn").click(function () {
			if ($("input[name='cats']").val() === '') {
				layer.msg('请选择一个分类', {
					icon: 6
				})
			} else if ($.validate.form("form-article-add")) {
				//获取编辑内容
				let editorData = editor.html.get(true);
				layer.open({
					title: "确认信息",
					area: ['600px', '400px'],
					type: 1,
					content: $("#okAdd").html(),
					success: function () {
						//填充图片
						var imgs = chooseImg(editorData);
						if (imgs.length > 0) {
							$.each(imgs, function (i, val) {
								$("#chooseImgBox").append("<img class='ophide' src='" + val + "' />")
							})
						}
						//填充描述
						$("#articleSummary").val(chooseSummary(editorData).slice(0, 160));
						//初始化选择事件
						$("#chooseImgBox>img").click(function () {
							if ($(this).hasClass("opshow")) {
								$(this).removeClass("opshow");
								$(this).addClass("ophide");
								return;
							}
							if ($(this).hasClass("ophide") && $(".opshow").length < maxPhoto) {
								$(this).removeClass("ophide");
								$(this).addClass("opshow");
								return;
							} else {
								layer.msg('最多选择' + maxPhoto + '张', {
									icon: 6
								})
							}
						});
						//保存文章
						$("#saveArticle").click(function () {
							let data = $('#form-article-add').serializeArray();
							data.push({ "name": "articleImg", "value": getImgSrc($(".opshow")).toString() });
							data.push({ "name": "articleContent", "value": editorData });
							data.push({ "name": "articleBuild", "value": 0 });
							data.push({ "name": "articleSummary", "value": $("#articleSummary").val() });
							$.operate.saveTab(prefix + "/add", data);
							layer.closeAll();
						});
					}
				});
			} else {
				layer.msg('表单验证未通过', {
					icon: 6
				});
			}
		});
		//截取图片
		function getImgSrc(dom) {
			var srcs = [];
			$.each(dom, function (i, val) {
				srcs.push($(this).attr("src"))
			});
			return srcs;
		}
		//获取上传的图片
		function chooseImg(str) {
			var data = []
			//获取img标签
			var imgReg = /<img.*?(?:>|\/>)/gi;
			//匹配src属性
			var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
			var arr = str.match(imgReg);
			if (arr == null) {
				return data;
			}
			for (var i = 0; i < arr.length; i++) {
				var src = arr[i].match(srcReg);
				//获取图片地址
				if (src[1]) {
					data.push(src[1]);
				}
			}
			return data;
		}
		//文章预览
		function chooseSummary(html) {
			html = html.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
			html = html.replace(/[ | ]*\n/g, '\n'); //去除行尾空白
			html = html.replace(/ /ig, ''); //去掉
			return html;
		}

		function autoComplateUrl() {
			var articleUrl = $("#articleUrl");
			if (articleUrl.html() === '') {
				var g = new Date().getTime();
				$("input[name='articleUrl']").val(g);
				$("#relativeUrl").html("/" + g);
			}
		}
		//初始化填充
		autoComplateUrl();

	</script>
</body>

</html>